<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
     #box{
     	width: 600px;
     	height: 350px;
     	border: 1px solid #ccc;
     	margin: 0 auto;
     	position: relative;
     	overflow: hidden;
     }
     ul,li{
     	margin: 0;
     	padding: 0;
     	list-style: none;

     }
     ul{
     	width: 3000px;
     	position: absolute; 
     	top: 0;
     	left: 0;
     }
     li{
     	float: left;
     }
     p{
     	width: 100%;
     	height: 35px;
     	background: #ccc;
     	opacity: 0.9;
        filter: Alpha(opacity=100);
        -ms:Alpha(Opacity=100);
        position: absolute;
        bottom: 10px;
        text-align: center;
     }
     p span{
     	padding: 4px 7px;
     	border-radius: 50%;
     	background: red;
     	line-height: 35px;
     	cursor: pointer;
     }
     .cur{
         background: gold;
         color: #fff;
     }
	</style>
<script type="text/javascript"> 
window.onload = function ()
{
    var oBox = document.getElementById("box");
    var aUl = document.getElementsByTagName("ul");
    var aImg = aUl[0].getElementsByTagName("li");
    var aNum = aUl[1].getElementsByTagName("li");
    var timer = play = null;
    var i = index = 0;  
    for (i = 0; i < aNum.length; i++)
    {
        aNum[i].index = i;
        aNum[i].onmouseover = function ()
        {
            show(this.index)
        }
    }
    oBox.onmouseover = function ()
    {
        clearInterval(play) 
    };
    oBox.onmouseout = function ()
    {
        autoPlay()
    };  
    function autoPlay ()
    {
        play = setInterval(function () {
            index++;
            index >= aImg.length && (index = 0);
            show(index);        
        },2000);    
    }
    autoPlay();
    function show (a)
    {
        index = a;
        var alpha = 0;
        for (i = 0; i < aNum.length; i++)aNum[i].className = "";
        aNum[index].className = "current";
        clearInterval(timer);           
        
        for (i = 0; i < aImg.length; i++)
        {
            aImg[i].style.opacity = 0;
            aImg[i].style.filter = "alpha(opacity=0)";  
        }
        
        timer = setInterval(function () {
            alpha += 2;
            alpha > 100 && (alpha =100);
            aImg[index].style.opacity = alpha / 100;
            aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
            alpha == 100 && clearInterval(timer).
        },20);
    }
};
</script>
</head>
<body>
	<div id="box">
		<ul>
			<li><img src="images/01.jpg" width="600px" height="350px"></li>
			<li><img src="images/02.jpg" width="600px" height="350px"></li>
			<li><img src="images/03.jpg" width="600px" height="350px"></li>
            <li><img src="images/04.jpg" width="600px" height="350px"></li>
            <li><img src="images/05.jpg" width="600px" height="350px"></li>
		</ul>
		<p>
			<span class="cur">1</span>
			<span>2</span>
			<span>3</span>
            <span>4</span>
            <span>5</span>
		</p>
	</div>
</body>
</html>